<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		html,body{background: #FFFFFF;}
		.warp{width: 100%;}
		input::-webkit-input-placeholder{color: #BDBDBD;font-size: 14px;}
		input::-moz-placeholder{color: #BDBDBD;font-size: 14px;}

		#header{position:fixed;width: 100%;height: 48px;background: #FFFFFF;z-index: 99;left: 0;top: 0;}
		#header .search-box{width: 100%;height: 48px;background: #FFFFFF;align-items: center;justify-content: center;}
		#header .search-box .go-back{flex-shrink: 0;align-items:center;justify-content: center;padding: 0 8px 0 15px;}
		#header .search-box .go-back img{display: block;width: 22px;height: 22px;}
		#header .search-box .search{height: 30px;border-radius:16px;padding-left:34px;box-sizing: border-box;background: url(../../image/main0/search_bg.png) no-repeat left 9px center #F3F5F5;background-size: 14px;}
		#header .search-box .search input{font-size: 14px;}
		#header .search-box .search .del{width: 30px;height: 30px;align-items:center;justify-content: center;}
		#header .search-box .search .del img{width: 16px;height: 16px;}
		#header .search-box .btn{flex-shrink: 0;padding: 0 15px;font-size: 15px;color: #4D4F50;}

		.info-box{width: 100%;background: #FFFFFF;padding-left: 15px ;box-sizing: border-box;}
		.info-box .title{align-items: center;justify-content: space-between;height: 50px;}
		.info-box .title .text{font-size: 14px;color: #333333;}
		.info-box .title .del{width: 50px;height: 50px;align-items:center;justify-content: center;}
		.info-box .title .del img{width: 16px;height: 16px;}
		.info-box .list{flex-wrap: wrap;padding-right: 15px;}
		.info-box .list span{display: block;padding: 0 20px;font-size: 12px;margin-right: 10px;margin-bottom: 12px;box-sizing: border-box;height: 32px;text-align: center;line-height: 32px;border-radius:16px;color: #333333;}
		.info-box .list span::before{border-radius: 30px;}
		.pop-info{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: #F6F6F6;padding-top: 10px;width: 100%;height: 100%;box-sizing: border-box;}
		.pop-info .pop-box{width: 100%;}
		.pop-info .pop-box .pop-one{height: 50px;line-height: 50px;padding-left: 15px;background: #FFFFFF;}
		.pop-info .pop-box .pop-one:last-child:before{display: none;}

	</style>
	<body>
		<div id="vue" class="warp">

			<div id="header" >
				<div class="search-box flex">
					<div class="go-back" tapmode onclick="backMenu(this);"><img src="../../image/main/back.png"/></div>
					<div class="search flex1 flex">
						<input class="flex1" type="text" id="keyword" onfocus="showList()" onblur="closeList()" oninput="inputText()" placeholder="搜索关键词"/>
						<div class="del flex" tapdome onclick="closeSearch()" style="display:none;"><img src="../../image/main3/del-img.png"/></div>
					</div>
					<div class="btn" tapmode onclick="goShopList(this);">搜索</div>
				</div>
			</div>
			<div class="zhanwei" style="width: 100%"></div>

			<!--热门搜索-->
			<div class="info-box" v-if="hotSearch.length > 0">
				<div class="title flex">
					<div class="text">热门搜索</div>
				</div>
				<div class="list flex">
					<span class="border-all" v-for="(item,key) in hotSearch" v-text="item.title" :data-val="item.title" tapmode onclick="goListShow(this)"></span>
				</div>
			</div>

			<!--历史搜索-->
			<div class="info-box" v-if="history.length > 0">
				<div class="title flex">
					<div class="text">历史搜索</div>
					<div class="del flex" tapdome onclick="delHistory()"><img src="../../image/main3/hotsea_icon.png"/></div>
				</div>
				<div class="list flex">
					<span class="border-all" v-for="(item,key) in history" v-text="item" :data-val="item" tapmode onclick="goListShow(this)"></span>
				</div>
			</div>



			<!-- <div class="pop-info" v-if="showList == 1">
				<div class="zhanwei" style="width: 100%;"></div>
				<div class="pop-box">
					<div class="pop-one border-bottom">雅诗兰黛眼霜 </div>
				</div>
			</div> -->

		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	var _top = lanYun.setHeader('header');
	var skey = "sokey";
	$('.zhanwei').height(_top);

	define(function (require, exports, module) {

		var userName = api.getPrefs({
		    sync: true,
		    key: 'hotkey'
		});

		//创建vue
		lanYun.newVue('#vue',{
			hotSearch:[],
			history:[],
			showList:0
		}, function() {

		});

		lanYun.vue.hotSearch = JSON.parse(userName) || [];
		lanYun.vue.history = lanYun.getStorage(skey) || [];

		// 点击搜索
		goShopList = function (){
			var keyword = $('#keyword').val();
			if(!keyword){
				lanYun.toast('请输入关键词');
				return;
			}
			msgcache_add(keyword);
	        lanYun.openWin('main0/list_shop.html', {
	            win:'none',
	            frameParam : {keyword:keyword},
	        });
		}

		// 点击标签
		goListShow = function (tis){
			var dst = tis.dataset;
			lanYun.openWin('main0/list_shop.html', {
	            win:'none',
	            frameParam : {keyword:dst.val},
	        });
			msgcache_add(dst.val);
		}
		inputText = function () {
			var keyword = $('#keyword').val();
			if(keyword.length > 0){
				$('.del').show();
			}else {
				$('.del').hide();
			}
		}
		// 缓存搜索数据
		msgcache_add = function(data){
			var Arrmsg = lanYun.getStorage(skey) || [];
			if(Arrmsg == null){
				Arrmsg = [];
			}
			if(Arrmsg.indexOf(data) < 0 && data){
			if(Arrmsg.length >= 20){
				Arrmsg.splice(0, 1);
			}
				Arrmsg.push(data);
			}
			lanYun.setStorage(skey,Arrmsg);
			lanYun.vue.history = lanYun.getStorage(skey);
			//console.log(lanYun.getStorage(skey));
		};

		// 搜索关联词类表
		showList = function (){
			lanYun.vue.showList = 1;
		}
		closeList = function () {
			lanYun.vue.showList = 0;
		}

		//页面关闭方法
		backMenu = function backMenu(tis){
			api.closeWin();
		}

		//清空搜索
		closeSearch = function(){
			$('#keyword').val('');
			$('.del').hide();
		}

		// 删除历史搜索
		delHistory = function (){
			lanYun.alert({fname:'diaLogBox1',title:'提示', button:['取消','确定'],content: '您确定要删除历史搜索吗？'},function(ret){
				//console.log(ret.index);
	            if (ret.index == 0) return;
				lanYun.vue.history = [];
				lanYun.rmStorage(skey);
	        });
		}

	});
</script>
